<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>
  <div>
    
    <div ng-include="headerInclude"></div>
    <div ng-controller="Apiman.ImportPolicyDefsController" id="form-page" class="container-pf-nav-pf-vertical container-fluid apiman-entity-new page" data-field="page" ng-cloak="" ng-show="pageState == 'loaded'">
      <div class="row">
        <h2 class="title" apiman-i18n-key="import-policy-defs">Import Policy Definition(s)</h2>
      </div>
      <div id="dataPage" ng-show="isData">
        <!-- Helpful hint -->
        <div class="row">
          <p apiman-i18n-key="import-policy-defs-help-text" class="col-md-6 apiman-label-faded">Import one or more policy definition.  Simply copy/paste (or drag and drop!) the policy definition data into the text area below and click Import - we'll do the rest!  Make sure the data is properly formatted JSON.</p>
        </div>
        <!-- HR -->
        <div class="row hr-row">
          <hr/>
        </div>
        <!-- Choose policyDef name -->
        <div class="row">
          <dl>
            <dt apiman-i18n-key="policyDef-data">Policy Definition Data</dt>
            <dd>
              <textarea id="data" apiman-drop-text ng-model="policyDefsJSON" data-field="data" class="apiman-form-control form-control apiman-form-data" width="100%"></textarea>
              <div class="alert alert-warning" ng-show="!isValid && policyDefsJSON" style="margin-top: 15px">
                 <span class="pficon pficon-info"></span>
                 <span apiman-i18n-key="invalid-policy-def-data-message">The policy definition data above is not valid.  Please make sure to type/copy a valid Policy Definition JSON document.</span>
              </div>
            </dd>
          </dl>
        </div>
        <!-- HR -->
        <div class="row hr-row">
          <hr/>
        </div>
        <!-- Import Button -->
        <div class="row">
          <button id="import" ng-disabled="!isValid" class="btn btn-primary" apiman-i18n-key="import" placeholder="Importing" data-icon="fa-cog"  ng-click="parseJSON()">Import</button>
          <a id="cancel" href="javascript:window.history.back()" class="btn btn-default btn-cancel" data-field="cancelButton" apiman-i18n-key="cancel">Cancel</a>
        </div>
      </div>

      <div id="confirmPage" ng-show="isConfirm">
        <div class="row">
          <table class="table table-striped table-bordered table-hover table-responsive" data-field="policyDefs">
            <thead>
              <tr>
                <th apiman-i18n-key="policy">Policy</th>
                <th class="no-phone" apiman-i18n-key="implementation.header">Implementation</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="policyDef in policyDefs">
                <td><i class="fa fa-{{policyDef.icon}} fa-fw"></i><span>{{ policyDef.name }}</span></td>
                <td class="no-phone">{{ policyDef.policyImpl }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="row">
          <p apiman-i18n-key="confirm-import-policyDefs">Really import the policy definition(s) listed above?</p>
        </div>
        <!-- Confirm Button  -->
        <div class="row">
          <button id="yes" apiman-action-btn="" class="btn btn-primary" data-field="yesButton" apiman-i18n-key="yes" placeholder="Importing..." data-icon="fa-cog" ng-click="importPolicyDefs()">Yes</button>
          <a id="no" href="javascript:window.history.back()" class="btn btn-default btn-cancel" data-field="noButton" apiman-i18n-key="no">No</a>
        </div>

      </div>
    </div> <!-- /container-pf-nav-pf-vertical container-fluid -->
  </div>
  </body>
</html>
